<template>
  <div>
    <PageTitle title="审核品牌列表"></PageTitle>
    <!-- <el-col :span="18">
      <dl class="select-bar">
        <dt>筛选:</dt>
        <dd :class="{ current: status == '0' }" @click="handleClick('0')">全部</dd>
        <dd :class="{ current: status == '2' }" @click="handleClick('2')">上架</dd>
        <dd :class="{ current: status == '1' }" @click="handleClick('1')">下架</dd>
      </dl>
    </el-col>-->
    <el-button type="primary" @click="Audit">审核通过</el-button>
    <el-table stripe :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="oid" label="ID"></el-table-column>
      <el-table-column prop="fication_name" label="品牌名称"></el-table-column>
      <el-table-column label="品牌LOGO">
        <template slot-scope="scope">
          <img
            :src="scope.row.url"
            style="width:60px;height:60px;cursor: pointer;"
            @click="handlePictureCardPreview(scope.row.url)"
            class="list-img"
          />
        </template>
      </el-table-column>
      <el-table-column prop="gprice" label="价格(元)"></el-table-column>
      <el-table-column label="余额支付">
        <template slot-scope="scope">
          <span>{{scope.row.balance ==="1" ? "是" : "否"}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="demolition" label="跳过拆盒">
        <template slot-scope="scope">
          <span>{{scope.row.demolition ==="1" ? "不跳过" : "跳过"}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="商品图片(视频)"
      >
        <template slot-scope="scope">
          <img v-if="!scope.row.url.endsWith('mp4')" :src="scope.row.url" @click="handlePictureCardPreview(scope.row.url)" class="list-img">
          <a v-else :href="scope.row.url" target="_blank">
            <video :src="scope.row.url"></video>
          </a>
        </template>
      </el-table-column>-->
      <el-table-column prop="company" label="所属公司"></el-table-column>
      <el-table-column prop="create_at" label="添加日期"></el-table-column>
      <!-- <el-table-column
        prop="state"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state == '2'" style="color: #67C23A">上架</span>
          <span v-else style="color: #F56C6C">下架</span>
        </template>
      </el-table-column>-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link
            :to="'/brandreview/detail/' + scope.row.oid + '/' + scope.row.fication_name + '/' + scope.row.company_id"
            class="el-button el-button--text"
          >查看</router-link>
          <el-button type="text" @click="del(scope.row.oid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrapper">
      <el-pagination
        layout="prev, pager, next"
        @current-change="pageChange"
        :total="totalCount"
        :page-size="pageSize"
        :current-page="pageNum"
      ></el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" />
    </el-dialog>
  </div>
</template>

<script>
import PageTitle from "@/components/pageTitle/PageTitle.vue";
export default {
  name: "SecondTypeList",
  components: {
    PageTitle
  },
  activated() {
    this._getList();
  },
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      totalCount: 0,
      status: "0",
      dialogImageUrl: "",
      dialogVisible: false,
      ids: []
    };
  },
  methods: {
    //多选
    handleSelectionChange(val) {
      console.log("多选---------", val);
      this.ids = val.map(item => {
        return item.oid;
      });

      console.log("多选---------", this.ids.join(","));
    },
    //批量审核通过
    Audit(e) {
      console.log("点击了审核通过");
      if (this.ids.length > 0) {
        this.$confirm("确认通过审核？")
          .then(() => {
            console.log("点击了确认");
            this.submitForm();
          })
          .catch(() => {
            console.log("点击了取消");
          });
      } else {
        this.$message({
          message: "请选择要审核的数据",
          type: "warning"
        });
      }
    },
    //点击过审
    async submitForm() {
      console.log("点击提交");
      this.loading = true;
      let data = await this.$axios({
        url: this.$api + "/v1/fication/trial",
        method: "POST",
        data: {
          oid: this.ids.join(",")
        }
      });
      this.loading = false;
      console.log("审核结果---------", data);
      if (data.data.code ==0) {
        this.$message.success(data.data.data)
        this._getList()
      }
    },
    //获取列表
    async _getList() {
      let {
        data: { data, code }
      } = await this.$axios({
        url: this.$api + "/v1/fication/triallist",
        method: "GET",
        params: {
          size: this.pageSize,
          current: this.pageNum
        }
      });
      if (code == 0) {
        this.tableData = data.items;
        this.totalCount = data.page.totalCount;
      }
    },
    del(id) {
      this.$confirm(`确认删除吗？`, "提示", {
        type: "warning"
      }).then(() => {
        this._del(id);
      });
    },
    async _del(id) {
      let {
        data: { code, data }
      } = await this.$axios({
        url: this.$api + "/v1/fication/strike",
        method: "POST",
        data: {
          id
        }
      });
      if (code === 0) {
        this.$message.success(data);
        this._getList();
      }
    },
    handleClick(s) {
      this.status = s;
      this.pageNum = 1;
      this._getList();
    },
    pageChange(pageNum) {
      this.pageNum = pageNum;
      this._getList();
    },
    handlePictureCardPreview(src) {
      this.dialogImageUrl = src;
      this.dialogVisible = true;
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/select-bar.scss";
.el-button--text,
.el-button--primary {
  text-decoration: none;
}
.pagination-wrapper {
  text-align: center;
  margin-top: 20px;
}
</style>
